<template>
    <Mapbox :mapOnLoadCB="mapOnLoadCB"></Mapbox>
    <div id='geocoder' class='geocoder'></div>
</template>

<script>
import {ref} from "vue"
import Mapbox from "@/components/common/Mapbox.component.vue"

export default {
    name: "UserQueryAddr.component",
    components: {Mapbox},
    setup() {

        let mapStore = ref({});
        let mapOnLoadCB = (map) => {
            mapStore.value = map;

            // 使用 mapbox-gl-geocoder 控件，利用与地图外部元素连接的 Mapbox Geocoding API 来查找地点。
            let geocoder = new MapboxGeocoder({
                accessToken: mapboxgl.accessToken,
                mapboxgl: mapboxgl
            });

            document.getElementById('geocoder').appendChild(geocoder.onAdd(map));
        };

        return {
            mapOnLoadCB
        }
    }
}
</script>

<style scoped lang="scss">
.geocoder {
    position: absolute;
    z-index: 1;
    width: 50%;
    left: 50%;
    margin-left: -25%;
    top: 20px;
}
:deep(.mapboxgl-ctrl-geocoder) {
    min-width: 100%;
}
</style>